<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table style="width:100%;" cellpadding="0" cellspacing="0">
        <!-- Header -->
        <tr>
          <td align="center" bgcolor="#FFFFFF" style="padding: 25px 2px 35px;">
            <h1 style="margin: 0; font-size: 24px; color: #333;"> 
              <% if ForemInstance.dev_to? %>
                <% if @user_follows_any_subforems %>
                  Forem Digest
                <% else %>
                  <%= community_name %> Digest
                <% end %>
              <% else %>
                <%= community_name %> Digest
              <% end %>
            </h1>
          </td>
        </tr>
        <tr>
          <td bgcolor="#F8F8F8" style="padding: 14px; text-align: center; color: #3a3c3d; font-size: 16px;border-radius: 12px; border: 3px solid <%= Settings::UserExperience.primary_brand_color_hex %>; font-weight: bold;">
            👋 Hey <%= @user.name.split.first %>, let's get you <span style="display:inline-block">caught up!</span>
          </td>
        </tr>

        <% if @billboards&.first&.present? %>
          <tr>
            <td bgcolor="#FFFFFF" style="padding: 16px 0 4px;">
              <hr style="border-top: 3px solid #0a0a0a;" />
            </td>
          </tr>
          <tr>
            <td bgcolor="#FFFFFF" style="padding: 20px 0 12px;">
              <%= @billboards.first.processed_html.html_safe %>
            </td>
          </tr>
          <tr>
            <td bgcolor="#FFFFFF" style="padding: 12px 0 8px;">
              <hr style="border-top: 3px solid #0a0a0a;" />
            </td>
          </tr>
        <% end %>
        <!-- Articles List -->
        <% @articles.each_with_index do |article, i| %>
          <tr>
            <td bgcolor="#FFFFFF" style="padding: <%= i.zero? ? "27" : "17" %>px 0px 0px; text-align: left;">
              <div style="border:2px solid #0a0a0a;border-radius:12px;padding:12px 12px 3px;">
                <a href="<%= article_url(article) %>?context=digest" style="font-weight: bold; color:#0a0a0a; font-size: 16px;display:block;"><%= article.title.strip %></a>
                <p style="margin-top: 5px; font-size: 14px; color: #808080;">
                  <%= truncate(article.description, length: 180) %>
                </p>
              </div>
            </td>
          </tr>
        <% end %>
        <% if ForemInstance.dev_to? %>
          <tr>
            <td bgcolor="#FFFFFF" style="padding: 30px 0 8px;">
                <p style="margin: 0; font-weight: bold; font-size: 20px;">
                  Happy coding ❤️
                </p>
            </td>
          </tr>
        <% end %>
        <tr>
          <td bgcolor="#FFFFFF" style="padding: 20px 0;">
            <hr style="border-top: 3px solid #0a0a0a;" />
          </td>
        </tr>

        <% if @billboards&.second&.present? %>
          <tr>
            <td bgcolor="#FFFFFF" style="padding: 8px 0 16px;">
              <%= @billboards.second.processed_html.html_safe %>
            </td>
          </tr>
          <tr>
            <td bgcolor="#FFFFFF" style="padding: 12px 0 8px;">
              <hr style="border-top: 3px solid #0a0a0a;" />
            </td>
          </tr>

        <% end %>
        <!-- Footer -->
        <tr>
          <td bgcolor="#FFFFFF" style="padding: 15px 0; font-size: 16px;">
            <h2>How to make your Digest better</h2>
            <% if @user.setting.experience_level.nil? %>
              <p style="margin: 22px 0; font-size: 16px;">
                Visit <b><a href="<%= app_url(user_settings_path(:customization)) %>" style="color: #0a0a0a; text-decoration: underline;">your settings</a></b> to enter your experience level to get more relevant posts for you.
              </p>
            <% end %>
            <p style="margin: 22px 0 10px; font-size: 16px;">
              Visit the <b><a href="<%= app_url(tags_path) %>" style="color: #0a0a0a; text-decoration: underline;">tags page</a></b> to choose which types of content will be featured.
            </p>
          </td>
        </tr>

        <tr>
          <td bgcolor="#FFFFFF" style="padding: 10px 0;">
            <hr style="border-top: 3px solid #0a0a0a;" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
